<template>
    <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 引入水球图插件, 在echarts中可以使用type=liquidFill引用
import 'echarts-liquidfill'
import { getReportData } from '@/api/index.js'

const option = ref({})
const renderChart = (data) => {
  option.value = {
    series: {
      type: 'liquidFill',
      data: [data],
      color: ['red'],
      radius: '80%', // 水球的半径
      outline: {
        borderDistance: 2, // 轮廓的距离(padding)
        itemStyle: {
          borderWidth: 2, // 轮廓的宽度(border)
        },
      },// 连线的轮廓
      amplitude: '4%', // 波浪的高度(振幅)
    },
  }
}

onMounted(async () => {
  const res = await getReportData()
  const data = (res.salesGrowLastDay / 100).toFixed(2)
  renderChart(data)
})
</script>

<style scoped></style>
